<template>
  <div class="preson">
    <ul>
      <li v-for="i in personList" :key="i.id">
        {{ i.name }}--{{ i.age }}
      </li>
    </ul>
  </div>
</template>
<script setup lang="ts" name="Preson">
  import {withDefaults} from 'vue'
  import {type PersonList} from '@/types'
  /* // 只接收
  defineProps(['personList']) */

  /* // 接收加限制,若需调用,需先保存实例
  let persons =  defineProps<{personList:PersonList}>() */

  /* // 接收加限制加限制必要性
  defineProps<{personList?:PersonList}>() */

  // 接收+限制类型+必要性+制定默认值
  withDefaults(defineProps<{personList?:PersonList}>(),{
    personList:()=>[{
      id:'',
      name:'',
      age:0
    }]
  })
</script>

<style scoped>
.preson {
  background-color: skyblue;
  box-shadow: 0 0 10px 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
